{% if versions.branches %}
<h6>{{ _('Branches') }}</h6>
<ul>
  {%- for item in versions.branches %}
    {%- set weight = "bold" if current_version.name == item.name else "normal" %}
    <li><a href="{{ item.url }}" style="font-weight: {{ weight }}">{{ item.name }}</a></li>
  {%- endfor %}
</ul>
{% endif %}
{% if versions.tags %}
<h6 id="releases_header">{{ _('Releases') }}
    <div id="releases_symbol" style="float:right"></div>
</h6>
<ul id="releases_content">
  {%- set ns = namespace(items=[]) %}
  {%- for tag in versions.tags %}
    {%- set extended_name = tag.name if "-rc" in tag.name else tag.name + "-rc.~" %}
    {%- set weight = "bold" if current_version.name == tag.name else "normal" %}
    {%- set ns.items = ns.items + [{"extended_name": extended_name, "tag": tag, "weight": weight}] %}
  {%- endfor %}
  {%- for item in ns.items|sort(attribute="extended_name", reverse=True) %}
    <li><a href="{{ item.tag.url }}" style="font-weight: {{ item.weight }}">{{ item.tag.name }}</a></li>
  {%- endfor %}
</ul>
<script>
    let expanded = !!JSON.parse(localStorage.getItem('expanded'));

    let releasesHeader = document.getElementById("releases_header");
    let releasesSymbol = document.getElementById("releases_symbol");
    let releasesContent = document.getElementById("releases_content");

    function setReleasesState() {
        localStorage.setItem("expanded", JSON.stringify(expanded))
        releasesContent.style.display = expanded ? "block" : "none";
        releasesSymbol.classList.add(expanded ? 'minus' : 'plus')
        releasesSymbol.classList.remove(expanded ? 'plus' : 'minus')
    }

    setReleasesState()
    releasesHeader.addEventListener("click", function() {
        expanded = !expanded;
        setReleasesState()
    })
</script>
<style>
    .plus {
        position: relative;
        width:20px;
        height:20px;
        background:#676767;
    }

    .plus:before,
    .plus:after {
        content: "";
        position:absolute;
        background:#fff;
    }

    .plus:before {
        left:50%;
        top:4px;
        bottom:4px;
        width:3px;
        transform:translateX(-50%);
    }

    .plus:after {
        top:50%;
        left:4px;
        right:4px;
        height:3px;
        transform:translateY(-50%);
    }



    .minus {
        position: relative;
        width:20px;
        height:20px;
        background:#676767;
    }

    .minus:before,
    .minus:after {
        content: "";
        position:absolute;
        background:#fff;
    }

    .minus:after {
        top:50%;
        left:4px;
        right:4px;
        height:3px;
        transform:translateY(-50%);
    }
</style>
{% endif %}
